<div class="button"> Shift </div>
<div class="target" style="top: 50px; left: 50px; width: 50px; height: 50px">T1</div>
<div class="target" style="top: 50px; left: 150px; width: 150px; height: 50px">T2</div>
<div class="target" style="top: 150px; left: 50px; width: 100px; height: 50px">T3</div>
<div class="target" style="top: 300px; left: 250px; width: 50px; height: 150px">T4</div>
<div class="target" style="top: 200px; left: 400px; width: 100px; height: 100px">T5</div>
<div class="target" style="top: 300px; left: 50px; width: 50px; height: 50px">T6</div>
<div class="target2" style="top: 330px; left: 80px; width: 120px; height: 120px">T7</div>

<ngx-selecto
  [selectableTargets]="['.target']"
  [dragContainer]="dragContainer"
  [hitRate]="40"
  [selectFromInside]="false"
  [toggleContinueSelect]="'shift'"
  (keydown)="onKeydown($event)"
  (keyup)="onKeyup($event)"
  (selectStart)="onSelectStart($event)"
  (selectEnd)="onSelectEnd($event)"
></ngx-selecto>
